<template>
  <div class="chart-c-m hasMore" v-loading="loading">
    <div style="display: flex; align-items: center;justify-content: space-between; background: #f8f9fb;">
      <div class="chart_title">{{name}}</div>
      <router-link :to="{name: 'product-list'}" style="font-size: 12px;padding-right: 12px" v-if="name === '热卖商品'">查看详情</router-link>
    </div>
    <div class="hot">
      <div class="nullContent" v-if="data.length<=0">
        <img style="height: 100px;" src="../../../assets/images/nullContent.png" alt="暂无数据"/> 暂无数据
      </div>
      <div class="hot_li" :key="index" v-for="(item, index) in data"
           @click="goGoodsDetail(item.spuId)">
        <text-ellipsis class="hot_text hot_href"
                       :outerShellWidth="width"
                       :contentText="item.spuName || item.country || item.key || item.keyword"
        ></text-ellipsis>
        <span class="hot_number">{{ item.count }}</span>
        <span class="hot_number" v-if="name !== '商品浏览排行'">{{ item.percent }}%</span>
      </div>
    </div>
    <LoadMore v-if="data.length > 5 && !isMore" :is-more="isMore" @on-change="onLoad" margin="10px" size="mini"></LoadMore>
  </div>
</template>

<script>
import LoadMore from '_c/LoadMore/index';
import TextEllipsis from '_c/TextEllipsis';
export default {
    components: {LoadMore, TextEllipsis},
    props: {
        name: {
            type: String
        },
        loading: {
            type: Boolean,
            default: false
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        data () {
            return this.list;
        }
    },
    data () {
        return {
            width: 180,
            isMore: false,
            pageSize: 0
        };
    },
    methods: {
        onLoad () {
            this.pageSize++;
            this.$emit('changePage', this.pageSize);
        },
        goGoodsDetail (id) {
        // this.$router.push({name: 'goods-detail', params: {id}}).catch(() => {});
            if (id) {
                let routeData = this.$router.resolve({
                    name: 'goods-detail',
                    params: {id},
                    query: this.$route.query
                });
                window.open(routeData.href, '_blank');
            }
        }
    }
};
</script>

<style scoped lang="scss">
.chart-c-m {
  overflow: hidden;
  width: calc((100% - 60px) / 3);
  height: 400px;
  border: 1px solid #d3d7dd;
  margin-bottom: 20px;
  &.hasMore{
    height: 450px;
  }

  .hot {
    padding: 0 25px;
    font-size: 14px;
    color: #212121;
    position: relative;
    height: 320px;
    overflow-y: auto;

    .hot_li {
      height: 52px;
      display: flex;
      line-height: 14px;
      border-bottom: 1px solid #e8e8e8;
      position: relative;

      .hot_text {
        padding: 19px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.no-link {
          flex: 2 2;
        }

        &:hover {
          color: #0c367b;
          cursor: pointer;
        }
      }

      .hot_number {
        flex: 1 1;
        text-align: right;
        padding: 19px 0;
      }
    }
  }

  &:not(:last-child) {
    margin-right: 20px;
  }

  .chart_title {
    height: 58px;
    line-height: 18px;
    background: #f8f9fb;
    font-size: 18px;
    color: #30354d;
    display: flex;
    padding: 21px 0;

    &:before {
      content: '';
      background: #555dbf;
      width: 4px;
      height: 18px;
      display: inline-block;
      margin-left: 20px;
      margin-right: 15px;
    }
  }
}
</style>
